<template>
  <div class="main">
      <m-Head class="head"></m-Head>
      <div class="menu-box">
          <ul>
            <li class="cseismicinfo"  @click="changeViews($event)">地震信息</li>
            <li class="cnearfz" @click="changeViews($event)">附近断裂带</li>
            <li class="cthd" @click="changeViews($event)">三维地形图</li>
            <li class="ctable" @click="changeViews($event)">图表分析</li>
          </ul>
      </div>
      <div class="view">
          <router-view :ok='ok'></router-view>
      </div>
  </div>
</template>

<script>
// import weatherInfo from "@/components/weatherinfo";
// import populationInfo from "@/components/populationinfo";
// import economicInfo from "@/components/economicinfo";
// import environmenInfo from "@/components/environmeninfo";
// import mThd from "@/components/thd";
// import mNearfz from "@/components/nearfz";
// import seismicInfo from "@/components/seismicinfo";
import mHead from "@/components/head";
export default {
  name: "computerPages",
  components: {
    mHead
  },
  data() {
    return {
      ok: true
    };
  },
  methods: {
    changeViews (e) {
      console.log(this.$router)
      let str = e.target.className
      // let url = window.location.href;
      // window.location.href = url+'/'+str;
      this.$router.push({ name: str})
    }
  }
};
</script>
<style>
    .map-container{
      height: 93vh;
    }
    .main{
      font-size: 14px;
      height: 100%;
    }
    .head{
      width: 100%;
    }
    .menu-box{
      height: 93vh;
      width: 222px;
      background-color: #393d49;
      position: relative;
      overflow: hidden;
      float: left;
    }
    .view{
      width: 85vw;
      height: 93vh;
      position: absolute;
      margin-left: 222px;
      overflow: hidden;
    }
    ul{
      margin: 0;
      padding: 0;
    }
    ul > li{
      margin: 0;
      padding: 0;
      list-style: none;
      color: #fff;
      cursor: pointer;
      height: 30px;
      padding: 3px;
      margin-left: 5px;
      padding-left: 2vw;
      line-height: 24px;
      text-align: left;
      opacity: 0.5;
    }
    ul>li:hover{
      opacity: 1;
      box-shadow: -8px 0 0 #5FB878;
    }
    
    
</style>

